<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>买买买！我喜欢</title>
<link
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 导入bootstrap -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 导入JQuery方便使用ajax插件 -->
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 导入bootstrap核心js文件 -->
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
</head>
<!-- 背景使用的是淘宝的链接图片 -->
<body>
	<nav class="navbar navbar-default navbar-static-top"
		style="margin-bottom: 0px;">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#myNavbar">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" id="top"
				style='padding-left: 300px; color: red'
				href="/ProfessionalDesign/login">亲，请登录</a>
		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav" style="padding-left: 100px">
				<li><a id="spc1" href="sign">免费注册</a></li>
				<li><a id="spc2" href="javascript:subToHP()">购物主页</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">我的<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:subToHX();">我的信息</a></li>
						<li><a
							href="/ProfessionalDesign/orderuser?user_id=${userinf.getUserid()}">订单信息</a></li>
						<li><a href="#">联系客服</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">购物车 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">Action</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li role="separator" class="divider"></li>
						<li class="dropdown-header">Nav header</li>
						<li><a href="#">Separated link</a></li>
						<li><a href="#">One more separated link</a></li>
					</ul></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">收藏夹 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">收藏的店铺</a></li>
						<li><a href="#">收藏的商品</a></li>
					</ul></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="padding-right: 300px">
				<li class="active"><a href="../navbar/">商品分类</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">商家中心<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">已卖出的宝贝</a></li>
						<li><a href="#">免费开店</a></li>
					</ul></li>
			</ul>
		</div>
	</div>
	</nav>
	<div id="Myconnect" class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div style="display: flex; margin-top: -7px;">
					<h1>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 54px; text-decoration: none">地猫</a>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 32px; text-decoration: none">Dmall.com</a>
					</h1>
					<form id="form1" class="form-inline" method="post"
						style="display: inline-flex; width: auto; margin-left: 73px; margin-top: 31px;">
						<input type="text" class="queryin" name="selector1" value="宝贝|"
							style="width: 35px" readonly="true"> <input type="text"
							class="queryin" name="selector" placeholder="男装女装"
							style="width: 600px"> <input type="button" id="query"
							value="搜索" class="btn btn-primary" id="select"
							style="margin-left: 1px; width: 70px">
					</form>
				</div>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-12 column"
				style="border-style: solid; border-color: #666666; border-width: 1px">
				<div style="display: inline-flex; line-height: 17px;">
					<div style="line-height: 34px;">价格区间</div>
					<div style="padding-top: 6px;">
						<span style="padding-left: 11px"> <input
							style="width: 45px;" placeholder="￥"> <span>-</span> <input
							style="width: 45px;" placeholder="￥">
						</span> <span "style="font-size: 14px"><input type="submit"
							style="width: 41px; height: 24px; padding: 0px;"
							class="btn btn-danger"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="row clearfix" style="margin-top:20px">
			<div class="col-md-12 column">
				<div class="row">
					<div class="col-md-12" >
					<c:forEach var="goods" items="${queryGoods}">
						<a class="myahr">
						<div class="thumbnail" style="display:inline-block">
							<img src="${goods.g_image}" style="width: 270px;height: 270px;">
							<div class="caption">
								<h3 style="color: #666666;">${goods.good_name}</h3>
								<p style="font-size: 20px;color:red">￥${goods.price}</p>
								<p>
									<a href="#" class="btn btn-primary" role="button">收藏</a> 
									<a href="#" class="btn btn-danger" role="button">加购</a>
								</p>
								<p style="color: #666666;font-size: 13px;">月销：${goods.buy_times}</p>
							</div>
						</div>
						</a>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部框 -->
	<div class="jumbotron text-center"
		style="margin-top: 100px; margin-bottom: 0; background-color: white">
		<br>
		<p>© 2022 ProfessionalDesign.com 版权所有</p>
		<a>关于我们</a>| <a>合作伙伴</a>| <a>营销中心</a>| <a>联系客服</a>| <a>开放平台</a>| <a>诚征英才</a>|
		<a>联系我们</a>| <a>网站地图</a>| <a>法律声明及隐私权政策</a>
	</div>
</body>
<style>
.thumbnail:hover{
	border-width:3px;
	border-color:#FF7F00;
	border-style:solid;
}
.myahr:hover{
		text-decoration:none;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
	{
	color: red;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus
	{
	color: red;
}

.page-header {
	padding-bottom: 9px;
	margin: 0px 0 20px;
	border-bottom: 1px solid #eee;
}

.ul1 {
	padding-inline-start: 55px;
	padding-inline-end: 40px;
}

.ul1 li {
	list-style: none;
	display: inline;
}

.ul1 li a {
	width: 225px;
}

.box {
	width: 600px;
	height: 300px;
	background-color: pink;
}

.carousel, .carousel img {
	width: 100%;
	height: 300px !important;
}

.queryin {
	width: 185px;
	height: 50px;
	outline: none;
	background: transparent;
	border: 0
}

#query {
	height: auto;
	border: 3px solid #FF7F00;
	float: right;
	border-radius: 30px;
	background-color: #FF7F00;
}

#form1 {
	padding-left: 30px;
	width: 211px;
	height: 50px;
	outline: none;
	border: 2px solid #FF7F00;
	margin: 39px 1px 33px 0;
	background: #f1f1f169;
	border-radius: 30px;
}

.link li a {
	display: inline-block;
}

.goods {
	display: inline-flex;
	background-color: #F7F9FA;
	border-radius: 10px;
	margin-top: 10px;
	margin-left: 18px;
	margin-bottom: 13px;
	height: 172px;
}

.goods:hover {
	text-decoration: none;
	background-color: transparent;
	border: 1px solid #FF7F00;
}

.goodtitle:hover {
	color: #FF7F00;
	text-decoration: none;
}

.goodimg {
	margin-top: 10px;
	margin-left: 10px;
	width: 150px;
	height: 150px;
	border-radius: 10px;
}

.goodtitle {
	width: 186px;
	padding-right: 15px;
	padding-top: 15px;
	padding-left: 10px;
	color: #333;
}

.tag-list {
	padding-top: 40px;
	padding-left: 10px;
	color: red;
	font-size: 25px;
}

.hotpng {
	padding-right: 8px;
}
</style>
<script>
$(document).ready(function () {
	$('#detail').load();
})
$("#numadd").click(function(){
	var initval = parseInt($("#numtext").val());
	$("#numtext").val(initval+1);
})
$("#numred").click(function(){
	var initval = parseInt($("#numtext").val());
	if(initval>=2){
		$("#numtext").val(initval-1);
	}	
})

function addToCart(){
	var num=parseInt($("#numtext").val());
	console.log("num===="+num);
	 $.ajax({
			url: '/ProfessionalDesign/cart/add/${user.userid}/${gooddetail.good_id}/'+num,
			type: 'post',
			success: function(data) {
				alert(data);
			}
		}); 
}
$(function(){
if(${user!=null}){
	$("#top").html('尊贵的用户'+'"'+'${user.username}'+'"'+'欢迎您');
}else{
	$("a").attr("href","${pageContext.request.contextPath}/login");
	$("#spc2").attr("href","javascript:subToHP()");
	$("#spc1").attr("href","sign");
}
})

function aa(){
	if(parseInt($("#numtext").val())<=0||$("#numtext").val()==''){
		var num=1;
		$("#numtext").val(num);
}
}

function subToHX(){
	var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "toUserInfo");
	form.append('<input type="text" name="userid" value="${user.userid}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
}
$('.carousel').carousel({
    interval: 2000
})
function subToHP(){
	if(${user!=null}){
		var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "homepage");
	form.append('<input type="text" name="userid" value="${user.userid}">');
	form.append('<input type="password" name="pwd" value="${user.pwd}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
	}
	else{
		window.location.href="homepage";
	}
}
function toGoodInf(good_id){
	if(${user!=null}){
		var form = $("<form>"); //定义一个form表单  
		form.attr('style', 'display:none'); //在form表单中添加查询参数  
		form.attr('method', 'post');
		form.attr('action', "goodInf");
		form.append('<input type="text" name="good_id" value="'+good_id+'">');
		form.append('<input type="text" name="userid" value="${user.userid}">');
		form.append('<input type="password" name="pwd" value="${user.pwd}">');
		$('body').append(form); //将表单放置在web中  
		form.submit(); //表单提交
	}
	else{
		window.location.href="homepage";
	}
}
$("#createcon").click(function (e) {
    e.preventDefault();
    console.log("xhhxhxhxhxhx");
    
    var iframe = $("<iframe>");
    iframe.attr('src',$(this).attr("href"));
    iframe.attr('frameborder',0);
    iframe.attr('width','100%');
    iframe.attr('height','100%');
    var div = $("<div>");
    div.attr('id','dialog');
    div.attr('title','我的客服聊天');
    div.attr('width','800px');
    div.attr('height','800px');
    div.attr('frameborder',0);
    div.append(iframe);
    $("#Myconnect").append(div);
    $("#dialog").dialog();
})

$("#viewComment").click(function (e) {
    e.preventDefault();
    $("#detail").load($(this).attr("href"));
})

</script>
</html>